<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="lib/jquery.mobile-1.4.3.css"/>
    <script src="lib/jquery-1.11.1.js"></script>
    <script src="lib/jquery.mobile-1.4.3.js"></script>
    <script type="text/javascript" src="kinetic-v5.1.0.js"></script>

</head>
<body id="main">
<div data-role="page" data-position="inline">
    <!-- 初始化脚本 start-->
    <script type="text/javascript" src="draw.js"></script>
    <script type="text/javascript" src="config.js"></script>
    <script type="text/javascript" src="util.js"></script>
    <script>
        $(document).on("pageinit", "#main", function () {
            $(':radio').change(function () {
                changType(Number($(this).val()));
            });
            $('#num_type').change(function () {
                changNumType(Number($(this).children('option:selected').val()));
            });
            $('#nums').change(function () {
                changNum(Number($(this).val()));
            });
            $('#switch').change(function () {
                var isOpen = Number($(this).children('option:selected').val());
                changIsMark(isOpen);
            });
            $('#reset').click(function () {
                reset();
            });
            $(window).on("orientationchange",function(){
                saveAll()
            });
            resize_canvas();
        });
    </script>
    <!-- 初始化脚本 end-->

    <div data-role="header" data-position="fixed" data-fullscreen="true">
        <a href="index.html" data-transition="none" data-role="button" data-icon="home">首页</a>

        <h1>编辑装裱效果</h1>
        <button data-role="button" data-icon="refresh" id="reset">重置</button>
    </div>

    <div data-role="content">
        <div data-role="content" id="container">
        </div>
    </div>

    <div data-role="footer" data-position="fixed" data-fullscreen="true" style="padding: 10px">
        <form>
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <label for="type_head">天</label>
                    <input type="radio" name="type" id="type_head" value="0" checked="true">
                    <label for="type_foot">地</label>
                    <input type="radio" name="type" id="type_foot" value="1">
                    <label for="type_side">边</label>
                    <input type="radio" name="type" id="type_side" value="2">
                </fieldset>
            </div>

            <div data-role="fieldcontain">
                <input type="range" name="nums" id="nums" value="50" min="0" max="500" data-highlight="true">
            </div>

            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <select name="switch" id="switch" data-native-menu="false">
                        <option value="1" selected>开启标尺</option>
                        <option value="0">关闭标尺</option>
                    </select>
                    <select id="num_type" name="num_type" data-native-menu="false">
                        <option value="0">市尺</option>
                        <option value="1">公尺</option>
                    </select>
                </fieldset>
            </div>
        </form>
    </div>
</div>
</body>
</html>